<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-table :tableHandles="tableHandles" :isSelection="false" :isIndex="false" :isPagination="true"
      :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" :isHandle="true" @refresh="init()">
    </r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
      labelWidth="200px" dialogWidth="700px" :isHandle="true" />
    <battery_details ref="battery_details"></battery_details>
  </div>
</template>
<script>
import battery_details from "./cus/battery_details";
export default {
  components: {
    battery_details,
  },
  data() {
    return {
      searchData: {
        batteryName: "",
        typeId: '',
        cabinetNo: '',
        batteryNo: '',
        id: '',
      },
      searchForm: [
        {
          type: "input",
          prop: "batteryNo",
          placeholder: "电池编号",
          width: 150,
        },
        {
          type: "input",
          prop: "batteryName",
          placeholder: "名称",
          width: 150,
        },
        {
          type: "input",
          prop: "typeId",
          placeholder: "电池类型",
          width: 150,
        },

        {
          type: "input",
          prop: "cabinetNo",
          placeholder: "换电柜编号",
          width: 170,
        },


        // {
        //   type: 'select',
        //   prop: 'commonType',
        //   placeholder: '请选择',
        //   width: 150,
        //   options:[
        //     {label:'公有',value:'1'},
        //     {label:'私有',value:'2'},
        //   ],
        //   isShow:()=>{
        //     return sessionStorage.role=='platform'?false:true;
        //   }
        // }
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "success",
          icon: "el-icon-search",
          handle: (e) => this.init(),
        },
      ],

      tableHandles: [
        // {
        //   label: "公有",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
        // {
        //   label: "自建",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
        {
          label: "新增",
          type: "primary",
          handle: (e) => this.elFormVisible(),
        },
        // {
        //   label: "导入数据",
        //   type: "primary",
        //   handle: e => {}
        // },
        // {
        //   label: "导出数据",
        //   type: "primary",
        //   handle: e => {}
        // }
      ],
      tableData: [],
      tableCols: [
        {
          label: "用户id",
          prop: "id",
        },
        {
          label: "名称",
          prop: "batteryName",
        },
        {
          label: "电池编号",
          prop: "batteryNo",
        },
        {
          label: "电池类型",
          prop: "typeId",
        },
        {
          label: "类别",
          prop: "commonType",
          formatter: (row) => {
            if (row.commonType == 1) {
              return "公有";
            } else if (row.commonType == 2) {
              return "私有";
            }
          },
        },
        // {
        //   label: '所属信息',
        //   prop: 'money'
        // },
        {
          label: "电池状态",
          prop: "btState",
          formatter: (row) => {
            if (row.btState == 0) {
              return "移动";
            } else if (row.btState == 1) {
              return "静止";
            } else if (row.btState == 2) {
              return "存储";
            } else if (row.btState == 3) {
              return "休眠";
            }
          },
        },
        {
          label: "换电柜编号",
          prop: "cabinetNo",
        },
        // {
        //   label: '持有用户信息',
        //   prop: 'giftMoney'
        // },
        {
          label: "更新时间",
          prop: "lastTime",
        },
        {
          label: "操作",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "编辑",
              type: "text",
              handle: (row) => this.elFormDetail(row),
            },
            // {
            //   label: '删除',
            //   type: 'text',
            //   handle: (row) => this.TableDel('/pack', { id: row.id }, 'del')
            // },
            {
              label: "详情",
              type: "text",
              handle: async (row) => {
                // this.$refs.battery_details.show_fun(row);
                // console.log("点击了详情");
                const res = await this.apis.battery_detail(row);
                // console.log("res--", res);
                this.$refs.battery_details.battery_info = res.data;
                this.$refs.battery_details.show = true;
                setTimeout(() => {
                  this.$refs.battery_details.map();
                }, 10);
              },
            },
          ],
        },
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        batteryName: "",
        batteryNo: "",
        typeId: "",
        typeVt: "",
        operatorId: "",
        agentId: "",
      },
      formCols: [
        { type: "input", label: "电池名称", width: 350, prop: "batteryName" },
        { type: "input", label: "电池编号", width: 350, prop: "batteryNo" },
        {
          type: "select",
          label: "电池类型",
          width: 350,
          prop: "typeId",
          options: [],
        },
        {
          type: "select",
          label: "电压",
          width: 350,
          prop: "typeVt",
          options: [
            { label: "48V", value: "48" },
            { label: "60V", value: "60" },
            { label: "72V", value: "72" },
          ],
          isDisabled: (e) => {
            if (this.formData.id) {
              return true;
            } else {
              return false;
            }
          },
        },
        {
          type: "select",
          label: "运营商",
          width: 350,
          prop: "operatorId",
          options: [],
          isShow: (row) => {
            return sessionStorage.role == "platform" ? true : false;
          },
        },
        {
          type: "select",
          label: "所属代理",
          width: 350,
          prop: "agentId",
          options: [],
          isShow: (row) => {
            return sessionStorage.role == "operator" ? true : false;
          },
        },
      ],
      formRules: {
        batteryName: [{ required: true, message: "请输入", trigger: "blur" }],
        batteryNo: [{ required: true, message: "请输入", trigger: "blur" }],
        typeId: [{ required: true, message: "请选择", trigger: "blur" }],
        typeVt: [{ required: true, message: "请输入", trigger: "blur" }],
        operatorId: [{ required: true, message: "请选择", trigger: "blur" }],
        agentId: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      formHandle: [
        {
          label: "取消",
          handle: (e) => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: (e) => this.elFormSubmit(),
        },
      ],
    };
  },

  computed: {},
  mounted() {
    this.init();
    this.batteryTypeList();
    this.operator_list();
    this.agent_list();
  },
  methods: {
    async init() {
      console.log(111111111111111);
      // if(!this.searchData.commonType){
      //   this.searchData.commonType='1'
      // }
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit,
        },
      };
      let res = await this.apis.battery_list(parm);
      if (res) {
        this.tableData = res.rows;
        this.tablePage.total = res.total;
      }
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.battery_updata(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          } else {
            let res = await this.apis.battery_save(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          }
        }
      });
    },
    async changestate(id) {
      let res = await this.api.packchange({ id });
      if (res) {
        this.init();
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach((key) => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;

      this.elFormVisible();
    },
    async batteryTypeList() {
      // const res=await this.apis.batteryTypeList({
      //   pageNum:1,
      //   pageSize:10000,
      //   commonType:'1'
      // });
      //
      // let list=res.rows;

      const res2 = await this.apis.batteryTypeList({
        pageNum: 1,
        pageSize: 10000,
        commonType: "2",
      });

      const list2 = res2.rows;

      // list=list.concat(list2);

      let options = [];
      list2.map((res) => {
        options.push({
          label: res.typeName,
          value: res.id,
        });
      });

      this.formCols[this.labIndex2(this.formCols, "typeId")].options = options;
    },
    async operator_list() {
      const res = await this.apis.operator_list({
        pageNum: 1,
        pageSize: 10000,
      });
      const list = res.rows;
      let options = [];
      list.map((res) => {
        options.push({
          label: res.name,
          value: res.id,
        });
      });
      this.formCols[this.labIndex2(this.formCols, "operatorId")].options =
        options;
    },
    async agent_list() {
      const res = await this.apis.agent_list({
        pageNum: 1,
        pageSize: 1000000,
      });
      const list = res.rows || [];
      let options = [];
      list.map((res) => {
        options.push({
          label: res.name,
          value: res.id,
        });

        this.formCols[this.labIndex2(this.formCols, "agentId")].options =
          options;
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
